<!--
 * @页面名称:详情页
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="detail">
    <Header :title="title" @clickLeft="clickLeft"></Header>
    <van-form>
      <van-field
        v-for="(item, index) in filedList"
        :key="index"
        v-model="formData[item.Field_Name]"
        :label="item.DDM_CNName + ':'"
        readonly
      />
    </van-form>
    <div class="btn">
      <a-dropdown>
        <van-button type="primary" style="border-radius: 5px 5px 0 0; width: 45%">子页面</van-button>
        <template #overlay>
          <a-menu>
            <a-menu-item v-for="(item2, index2) in childData" :key="index2">
              <el-button link @click="toSublevel(item2)"> {{ item2.FMT_Name }} </el-button>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <van-button type="primary" style="border-radius: 5px 5px 0 0; width: 45%" @click="showFullText()">查看全文</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import useCurrentInstance from "@/utils/useCurrentInstance";
import localCache from "@/utils/cache";
import { cloneDeep } from "lodash-es";
import ACrypto from "@/utils/crypto";
import Header from "../header/index.vue";

const { proxy } = useCurrentInstance();
// 路由
const router = useRouter();
// 标题
const title = "数据详情";
// 表单内容
const formData = ref<any>({});
// 源数据
const sourceData = ref<any>({});
// 字段集合
const filedList = ref<any>([]);
// 路由信息
let info = localCache.getCache("detail-query", false);
const childrenFmtId: any = info.childrenFmtId ? JSON.parse(info.childrenFmtId) : undefined;

// 字典数据
const dictionaryData = ref([]);
// 子级数据
const childData = ref<any>([]);
// 获取数据
const getData = () => {
  proxy.$vueAxios
    .get("Dynamic/CommonSingleDataGet", { fmtId: info.fmtid, Id: info.id }, { noLoading: true })
    .then(async (res: any) => {
      formData.value = res.Model;
      formData.value.Title = ACrypto.getSS(formData.value.Title);
      sourceData.value = cloneDeep(res.Model);
      await getCatalog();
      await getBaseData();
      await formatter();
    });
};
// 获取分类
const getCatalog = async () => {
  await proxy.$vueAxios
    .get("Master_Base_Catalog/GetById", { objId: formData.value.Catalog_ID }, { noLoading: true })
    .then((res: any) => {
      formData.value["Catalog_ID"] = res.Model.Catalog_Name;
    });
};
// 获取字段
const getField = () => {
  proxy.$vueAxios
    .post("Master_Base_Data_Disp_Mstr/GetConditional", {
      order: "DDM_Order asc",
      dtoList: [{ fieldName: "FMT_ID", fieldValue: info.fmtid }]
    })
    .then((res: any) => {
      filedList.value = res.List.filter((v: any) => v.DDM_Enable_Display_Collect === true && v.Field_Name != "IsLock");
    });
};
// 获取字典基础数据
const getBaseData = async () => {
  await proxy.$vueAxios.get("Master_Base_DataDictionary/Get", { order: "DD_Order asc" }, { noLoading: true }).then((res: any) => {
    dictionaryData.value = res.List;
  });
};
// 字段转换
const formatter = async () => {
  const data = dictionaryData.value.filter((v: any) => v.DD_Code === "BGQXdata") as any;
  const param = {
    order: "DDL_Order asc",
    dtoList: [
      {
        fieldName: "DD_ID",
        fieldValue: data[0].DD_ID,
        conditionalType: 0
      }
    ]
  };
  await proxy.$vueAxios.post("Master_Base_DDL/GetConditional", param, { noLoading: true }).then((res: any) => {
    const res2 = res.List.filter((v: { DDL_ID: any }) => v.DDL_ID == formData.value.RetentionPeriod);
    formData.value.RetentionPeriod = res2[0].DDL_Name;
  });
  const dept = dictionaryData.value.filter((v: any) => v.DD_Code === "Dept_ID") as any;
  const param2 = {
    order: "DDL_Order asc",
    dtoList: [
      {
        fieldName: "DD_ID",
        fieldValue: dept[0].DD_ID,
        conditionalType: 0
      }
    ]
  };
  await proxy.$vueAxios.post("Master_Base_DDL/GetConditional", param2, { noLoading: true }).then((res: any) => {
    const res2 = res.List.filter((v: { DDL_ID: any }) => v.DDL_ID == formData.value.Dept_ID);
    formData.value.Dept_ID = res2[0].DDL_Name;
  });
  const stateName: any = {
    1: "Collect",
    2: "Arrangement",
    3: "Storage",
    4: "Utilization"
  };
  formData.value.Status = stateName[formData.value.Status];
};
// 返回上一步
const clickLeft = () => {
  router.back();
};
// 查看全文
const showFullText = () => {
  router.push({
    path: "/fulltext",
    query: {
      Record_ID: formData.value.Record_ID
    }
  });
};
// 获取当前数据下的子级
const getChild = () => {
  proxy.$vueAxios
    .post("Master_Base_FormModel_Table/GetConditional", {
      order: "FMT_Type ASC",
      dtoList: [
        {
          fieldName: "FM_ID",
          fieldValue: info.fmid
        }
      ]
    })
    .then((res: any) => {
      childData.value = res.List.filter((v: any) => v.FMT_Parent_ID === info.fmtid);
    });
};
// 跳转子页面
const toSublevel = async (item: any) => {
  const Res = await proxy.$vueAxios.post("Master_Base_FormModel_Table/GetConditional", {
    order: "FMT_Type ASC",
    dtoList: [
      {
        fieldName: "FM_ID",
        fieldValue: info.fmid
      }
    ]
  });
  const childrenFmtId2 = Res.List.filter((v: any) => v.FMT_Parent_ID === item.FMT_ID).map((v: any) => v.FMT_ID);
  const stateName: any = {
    1: "Collect",
    2: "Arrangement",
    3: "Storage",
    4: "Utilization"
  };
  router.push({
    name: "mobileSublevel",
    query: {
      fmid: sourceData.value.FM_ID,
      fmtid: typeof childrenFmtId === "string" ? childrenFmtId : childrenFmtId.filter((v: any) => v === item.FMT_ID)[0],
      childrenFmtId: childrenFmtId2,
      status: stateName[sourceData.value.Status],
      fondsId: info.fondsId,
      fatherObj: encodeURIComponent(JSON.stringify(sourceData.value))
    }
  });
};
onMounted(() => {
  getData();
  getField();
  getChild();
});
</script>

<style scoped lang="scss">
.detail {
  height: 100vh;
  background: #f5f5f5;
  :deep(.van-form) {
    height: calc(100% - 98px);
    overflow: auto;
  }
  :deep(.van-field__label) {
    width: 7em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .btn {
    width: 100vw;
    bottom: 0;
    position: fixed;
    display: flex;
    justify-content: space-between;
  }
}
</style>
